<template>
	<div class="home" id="particles-js" >
		<el-row class="top-box">
			<el-col :span="22">
				<div class="grid-content bg-purple-dark navigation-assembly">
					<!-- 标签页布局 -->
					<NavigationAssembly/>
				</div>
			</el-col>
			<el-col :span="2">
				<div class="grid-content bg-purple-dark head-ssembly">
					<!-- 右上角登录布局 -->
					<HeadAssembly />
				</div>
			</el-col>
		</el-row>
		<el-row class="central-section-box">
			<el-col :span="24">
				<div class="grid-content bg-purple middle-assembly">
					<!-- 中间布局 -->
					<MiddleAssembly/>
				</div>
			</el-col>
		</el-row>
		<el-row class="bottom-box">
			<el-col :span="24">
				<div class="grid-content bg-purple">
					<!-- 页尾布局组件 -->
					<BottomAssembly />
				</div>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	//引入粒子相关js
	import particlesJs from "particles.js";
	import particlesConfig from "../assets/json/particles.json";
	import HeadAssembly from './HeadAssembly.vue'
	import MiddleAssembly from './MiddleAssembly.vue'
	import BottomAssembly from './BottomAssembly.vue'
	import NavigationAssembly from './NavigationAssembly.vue'

	export default {
		name: 'Home',
		components: {
			HeadAssembly,
			MiddleAssembly,
			BottomAssembly,
			NavigationAssembly
		},
		mounted() {
			particlesJS("particles-js", particlesConfig);
		 },
		// created() {
		// 	window.L2Dwidget
		// 		.init({
		// 			pluginRootPath: '../live2dw/',
		// 			pluginJsPath: 'lib/',
		// 			pluginModelPath: 'live2d-widget-model-hijiki/assets/',
		// 			model: {
		// 				jsonPath: '../live2dw/live2d-widget-model-hijiki/assets/hijiki.model.json'
		// 			},
		// 			dialog: {
		// 				enable: true,
		// 				script: {
		// 					//每20s，显示一言（调用一言Api返回的句子）
		// 					'every idle 20s': '~喵( =•ω•= )m~'
		// 				}
		// 			},
		// 			display: { //人物的属性配置
		// 				position: 'left',
		// 				width: 250,
		// 				height: 500,
		// 				hOffset: 370, // 横向偏移
		// 				vOffset: -101 // 纵向偏移
		// 			},
		// 			mobile: {
		// 				show: true, //是否在移动端展示
		// 				scale: 0.5 //t透明度
		// 			}
			
		// 		});
		// },
		// beforeDestroy() {
		// 	//移除动画人物
		// 	document.querySelector('#live2d-widget').remove();
		// },
	}
</script>

<style scoped>

	.home {
		background: url("@/assets/images/background-map.jpg");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		left: 0;
		min-height:100vh;
	}

	.el-row {
	
		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}





	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
